<template>
<div>  
 <div>
     <Tabs type="card">
       <!-- 
         ***
         ***考试试卷信息
          -->
       <TabPane label="1.考试信息">
             <Card><Form>
         <h1>试卷题目:</h1><FormItem><Input type="text" style="width:400px" v-model="examPageTitle" placeholder="输入你要出的试卷题目" ></input></FormItem>
         <h1>试卷类型:</h1><FormItem><Select v-model="testType" style="width:400px">
        <Option value="时段考卷" label="时段考卷">
            <span>时段考卷</span>
            <span style="float:right;color:#ccc">有较短考试时间段</span>
        </Option>
        <Option value="练习考卷" label="练习考卷">
            <span>练习考卷</span>
            <span style="float:right;color:#ccc">有一个截止时间段</span>
        </Option>
        <Option value="题库考卷" label="题库考卷">
            <span>题库考卷</span>
            <span style="float:right;color:#ccc">没有时间段限制</span>
        </Option>
        </Select></FormItem>
         <h1>请选择你的出卷信息:</h1><FormItem ><Cascader :data="data1" trigger="hover" @on-change="getListData"></Cascader></FormItem>
           <Alert type="error" show-icon style="width:400px"><span>前四项是必选  否则提交不了</span><br/><span> 请选对你所在专业的考试信息</span></Alert>
         </Form></Card> 
       </TabPane>
       <!-- ***
       ****
       ****单选题 
       -->
       <TabPane label="2.单选题" >
       <Card><Form ref="singleChoiceData" :model="singleChoiceData" :rules="ruleValidate" >
         <h1>已出单选题数:{{i}}>>总分:{{sumScore1}}</h1>
         <h4>问题：</h4> <FormItem  prop="question"><Input type="text"  v-model="singleChoiceData.question" placeholder="输入你要出的问题" ></input></FormItem>
         <h4>A选项：</h4> <FormItem prop="A"><Input type="text"  v-model="singleChoiceData.A" placeholder="输入你要出的A选项" ></input></FormItem>
         <h4>B选项：</h4> <FormItem prop="B"><Input type="text"  v-model="singleChoiceData.B" placeholder="输入你要出的B选项"></input></FormItem>
         <h4>C选项：</h4> <FormItem prop="C"><Input type="text"  v-model="singleChoiceData.C" placeholder="输入你要出的C选项"></input></FormItem>
         <h4>D选项：</h4> <FormItem prop="D"><Input type="text"  v-model="singleChoiceData.D" placeholder="输入你要出的D选项"></input></FormItem>
        <h4>分值：</h4> <FormItem prop="singleValue"><Input type="text"  v-model="singleChoiceData.singleValue" placeholder="输入分值" ></input></FormItem>
         <h4>正确答案：</h4> <FormItem> 
           <RadioGroup v-model="singleChoiceData.Right1">
                <Radio label="A"></Radio>
                <Radio label="B"></Radio>
                <Radio label="C"></Radio>
                <Radio label="D"></Radio>
            </RadioGroup></FormItem>
      <FormItem><Button type="success" long @click="handleSubmit1('singleChoiceData')">提交</Button></FormItem>
      <FormItem><Button type="error" long @click="clearUpQues1()">删除上一道题</Button>
      </FormItem>
      </Form></Card></TabPane>
      <!-- ***
      ****
      ***多选题
       -->
        <TabPane label="3.多选题" >    <Card> <Form ref="multiChoiceData" :model="multiChoiceData" :rules="ruleValidate">
       <h1>已出多选题数:{{j}}>>总分:{{sumScore2}}</h1>
         <h4>问题：</h4> <FormItem prop="question"><Input type="text"  v-model="multiChoiceData.question" placeholder="输入你要出的问题 "></input></FormItem>
         <h4>A选项：</h4> <FormItem prop="A"><Input type="text"  v-model="multiChoiceData.A" placeholder="输入你要出的A选项"></input></FormItem>
         <h4>B选项：</h4> <FormItem prop="B"><Input type="text"  v-model="multiChoiceData.B" placeholder="输入你要出的B选项"></input></FormItem>
         <h4>C选项：</h4> <FormItem prop="C"><Input type="text"  v-model="multiChoiceData.C" placeholder="输入你要出的C选项"></input></FormItem>
         <h4>D选项：</h4> <FormItem prop="D"><Input type="text"  v-model="multiChoiceData.D" placeholder="输入你要出的D选项"></input></FormItem>
         <h4>分值：</h4> <FormItem prop="singleValue"><Input type="text"  v-model="multiChoiceData.singleValue" placeholder="输入分值" ></input></FormItem>
         <h4>正确答案：</h4> <FormItem prop="Right2">
            <CheckboxGroup v-model="multiChoiceData.Right2">
                <Checkbox label="A"></Checkbox>
                <Checkbox label="B"></Checkbox>
                <Checkbox label="C"></Checkbox>
                <Checkbox label="D"></Checkbox>
            </CheckboxGroup>
        </FormItem>
      <FormItem><Button type="success" long @click="handleSubmit2('multiChoiceData')">提交</Button>
      </FormItem>
      <FormItem><Button type="error" long @click="clearUpQues2()">删除上一道题</Button>
      </FormItem>
      </Form></Card>
      </TabPane>
      <!-- ****
        ****
        ****多选题
         -->
        <TabPane label="4.判断题" >
           <Form ref="judgeQus" :model="judgeQus" :rules="ruleValidate">
           <h1>已出判断题数:{{m}}>>总分:{{sumScore3}}</h1>
           <h4>问题:</h4><FormItem prop="question"><Input type="text"  v-model="judgeQus.question" placeholder="输入你要出的问题 "></input></FormItem>
           <h4>分值:</h4><FormItem prop="singleValue"><Input type="text"  v-model="judgeQus.singleValue" placeholder="输入分值" ></input></FormItem>
           <h4>正确答案:</h4><FormItem>
            <RadioGroup v-model="judgeQus.Right1">
              <Radio label="T">
               <svg class="icon" aria-hidden="true"><use xlink:href="#iconShapeCopy"></use></svg>
                </Radio>     
               <Radio label="F">
                <svg class="icon" aria-hidden="true"><use xlink:href="#iconcuowu"></use></svg>
                 </Radio>
               </RadioGroup></FormItem>
                <FormItem><Button type="success" long @click="handleSubmit3('judgeQus')">提交</Button> </FormItem>
                <FormItem><Button type="error" long @click="clearUpQues3()">删除上一道题</Button></FormItem>
      </Form>
        </TabPane>
        <!-- ****
        ******
        ******填空题
         -->
        <TabPane label="5.填空题" >
          <Form ref="fillingQus" :model="fillingQus" :rules="ruleValidate">
          <h1>已出填空题数:{{n}}>>总分:{{sumScore4}}</h1>
          <h4>问题:</h4><FormItem prop='question'><Input type="text" v-model="fillingQus.question" placeholder="请输入你的问题,记得在填空地方加下划线"></Input></FormItem>
          <h4>分值:</h4><FormItem prop="singleValue"><Input type="text"  v-model="fillingQus.singleValue" placeholder="输入分值" ></Input></FormItem>
          <h4>答案:</h4><FormItem prop='fillingOneAnswer'><Input type="text"  v-model="fillingQus.fillingOneAnswer" placeholder="输入一个对应一个空格的答案" ></Input>
          <Button type="error" size='small' @click="upOneAnswer">提交一个答案</Button></FormItem>
          <FormItem><h4>这道填空题的全部答案:{{this.fillingQus.Right2}}</h4></FormItem>
          <FormItem><Button type="success" long @click="handleSubmit4('fillingQus')">提交</Button> </FormItem>
          <FormItem><Button type="error" long @click="clearUpQues3()">删除上一道题</Button></FormItem>
          </Form></TabPane>
        <!-- 
          ***
          ***
          ***考试时间设计 -->
        <TabPane label="6.考试时间" class='pane'>
          <div class='alert'>  <Alert  type="warning" show-icon>
        时间设置注意事项<br/>
        <span>1:在时段考卷下,考试开始时间和时间总长是必须设置！</span><br/>
        <span>2:在练习考卷下,截至时间是必须设置</span><br/>
        <span>2:在题库考卷下,时间可设可不设,设置是多余的</span> 
    </Alert></div>
          <Form>
      <h4>考试开始时间(截止时间)设置:</h4>
      <FormItem ><Col span="12">
      <DatePicker type="datetime" clearable size='large' v-model="examStartTime" placeholder="请输入考试的具体时间" style="width: 200px"></DatePicker>
        </Col></FormItem>
        <h4>考试总时长设置:</h4> 
      <FormItem ><Col span="12">
      <TimePicker type="time"  clearable size='large' v-model="examTime" placeholder="请输入考试的时长" style="width: 200px"></TimePicker>
        </Col></FormItem>
      <FormItem><Button type="error" long @click="uploadtoDatabase(examInfo,singleMsg,multiMsg)" :disabled='isDisable'>导入数据库</Button>
      </FormItem>
      </Form></TabPane>
     </Tabs>
</div></div>
</template>
<script>
function addZero(val) {
  if (val < 10) {
    return "0" + val;
  } else {
    return val;
  }
}
export default {
  props:['major'],
  data() {
    return {
      Major:this.major,
       testStatus:false,
        testType:'',
      isDisable: false,
      val1: "",
      val2: "",
      val3:'',
      val4:'',
      examTime: "",
      examStartTime:'',
      examPageTitle:'',
      getteachername: "",
      examPageMsg: new Map(),
      examInfo: [],
      sumScore1: 0,
      sumScore2: 0,
      sumScore3: 0,
      sumScore4:0 ,
      singleMsg: [],
      multiMsg: [],
      judgeQusMsg:[],
      fillingMsg:[],
      i: 0,
      j: 0,
      m:0,
      n:0,
      singleChoiceData: {
        question: "",
        A: "",
        B: "",
        C: "",
        D: "",
        Right1: "",
        singleValue: ""
      },
      singleChoiceData1: {
        question: "",
        A: "",
        B: "",
        C: "",
        D: "",
        Right1: "",
        singleValue: ""
      },
      multiChoiceData: {
        question: "",
        A: "",
        B: "",
        C: "",
        D: "",
        Right2: [],
        singleValue: ""
      },
      multiChoiceData1: {
        question: "",
        A: "",
        B: "",
        C: "",
        D: "",
        Right2: [],
        singleValue: ""
      },
      judgeQus:{
        question: "",
        Right1:'',
        singleValue: ""
      },
       judgeQus1:{
        question: "",
        Right1:'',
        singleValue: ""
      },
      fillingQus:{
        question:'',
        Right2:[],
        singleValue: "",
        fillingOneAnswer:'',//存填空题的一个答案
      },
      fillingQus1:{
        question:'',
        Right2:[],
        singleValue: "",
        fillingOneAnswer:'',//存填空题的一个答案
      },
      ruleValidate: {
        question: [{ required: true, message: "请输入题目", trigger: "blur" }],
        A: [{ required: true, message: "请输入A选项", trigger: "blur" }],
        B: [{ required: true, message: "请输入B选项", trigger: "blur" }],
        C: [{ required: true, message: "请输入C选项", trigger: "blur" }],
        D: [{ required: true, message: "请输入D选项", trigger: "blur" }],
        Right1: [{ required: true, message: "请选择答案", trigger: "blur" }],
        Right2: [
          {
            required: true,
            type: "array",
            message: "请选择答案",
            trigger: "blur"
          },
          {
            type: "array",
            min: 2,
            max: 4,
            message: "只少选两项",
            trigger: "change"
          }
        ],
        singleValue: [
          { required: true, message: "请输入分值", trigger: "blur" },
          {pattern:/^[0-9]+$/,message:'只能输入数字'},
        ]
      },
      /* 这是级联数据，增添修改来这 */ data1: [
        {
          value: "计算机与控制学院",
          label: "计算机与控制学院",
          children: [
            {
              value: "大一",
              label: "大一",
              children: [
                {
                  value: "上学期",
                  label: "上学期",
                  children: [
                    {
                      value: "软件工程",
                      label: "软件工程"
                    },
                    {
                      value: "通信工程",
                      label: "通信工程",
                      children: [
                        {
                          value: "大一高数",
                          label: "大一数学"
                        },
                        {
                          value: "线性代数",
                          label: "线性代数"
                        },
                        {
                          value: "微积分",
                          label: "微积分"
                        },
                        {
                          value: "马克思与毛泽东思想",
                          label: "马克思与毛泽东思想"
                        },
                        {
                          value: "大学英语一",
                          label: "大学英语一"
                        },
                        {
                          value: "C语言",
                          label: "C语言"
                        }
                      ]
                    },
                    {
                      value: "计算机科学",
                      label: "计算机科学"
                    },
                    {
                      value: "大数据分析",
                      label: "大数据分析"
                    }
                  ]
                },
                {
                  value: "下学期",
                  label: "下学期"
                }
              ]
            },
            {
              value: "大二",
              label: "大二",
              children: [
                {
                  value: "上学期",
                  label: "上学期",
                  children: [
                    {
                      value: "软件工程",
                      label: "软件工程"
                    },
                    {
                      value: "通信工程",
                      label: "通信工程"
                    },
                    {
                      value: "计算机科学",
                      label: "计算机科学"
                    },
                    {
                      value: "大数据分析",
                      label: "大数据分析"
                    }
                  ]
                },
                {
                  value: "下学期",
                  label: "下学期"
                }
              ]
            },
            {
              value: "大三",
              label: "大三",
              children: [
                {
                  value: "上学期",
                  label: "上学期"
                },
                {
                  value: "下学期",
                  label: "下学期"
                }
              ]
            },
            {
              value: "大四",
              label: "大四",
              children: [
                {
                  value: "上学期",
                  label: "上学期",
                  children: [
                    {
                      value: "软件工程",
                      label: "软件工程"
                    },
                    {
                      value: "通信工程",
                      label: "通信工程",
                      children: [
                        {
                          value: "无线原理",
                          label: "无线原理"
                        },
                        {
                          value: "现代交换技术",
                          label: "现代交换技术"
                        }
                      ]
                    },
                    {
                      value: "计算机科学",
                      label: "计算机科学"
                    },
                    {
                      value: "大数据分析",
                      label: "大数据分析"
                    }
                  ]
                },
                {
                  value: "下学期",
                  label: "下学期"
                }
              ]
            }
          ]
        },
        {
          value: "海洋学院",
          label: "海洋学院",
          children: [
            {
              value: "大一",
              label: "大一",
              children: [
                {
                  value: "xxxx",
                  label: "xxxx"
                }
              ]
            },
            {
              value: "大二",
              label: "大二"
            },
            {
              value: "大三",
              label: "大三"
            },
            {
              value: "大四",
              label: "大四"
            }
          ]
        }
      ]
    };
  },
  mounted() {
  },
  methods: {
    getListData(val) {
      this.examInfo = val;
    },
    //处理单选题
    handleSubmit1(val) {
      console.log(this.examInfo)
      this.$refs[val].validate(valid => {
        if (valid) {
          let that = this;
          that.$Message.success("提交成功!");
          that.i++;
          that.singleMsg.push(that.singleChoiceData);
          let sum = 0;
          that.singleMsg.map(item => {
            sum = sum + parseInt(item.singleValue);
            that.sumScore1 = sum;
          });
        } else {
          this.$Message.error("内容有误!");
        }
      });
      this.val1 = Object.assign({}, this.singleChoiceData1);
      this.singleChoiceData = this.val1;
    },
    //处理多选题
    handleSubmit2(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          this.$Message.success("提交成功!");
          this.multiMsg.push(this.multiChoiceData);
          this.j++;
          let sum = 0;
          this.multiMsg.map(item => {
            sum = sum + parseInt(item.singleValue);
            this.sumScore2 = sum;
          });
        } else {
          this.$Message.error("内容有误!");
        }
      });
      this.val2 = Object.assign({}, this.multiChoiceData1);
      this.multiChoiceData = this.val2;
    },
    //处理判断题
    handleSubmit3(val) {
          this.$refs[val].validate(valid => {
        if (valid) {
          let that = this;
          that.m++;
          that.judgeQusMsg.push(that.judgeQus);
          that.$Message.success("提交成功!");
          let sum = 0;
          that.judgeQusMsg.map(item => {
            sum = sum + parseInt(item.singleValue);
            that.sumScore3 = sum;
          });
        } else {
          this.$Message.error("内容有误!");
        }
      });
      this.val3 = Object.assign({}, this.judgeQus1);
      this.judgeQus = this.val3;
    },
    //处理填空题提交问题
    handleSubmit4(val){
          this.$refs[val].validate(valid => {
        if (valid) {
          let that = this;
          that.n++;
          that.fillingMsg.push(that.fillingQus);
          that.$Message.success("提交成功!");
          let sum = 0;
          that.fillingMsg.map(item => {
            sum = sum + parseInt(item.singleValue);
            that.sumScore4 = sum;
          });
        } else {
          this.$Message.error("内容有误!");
        }
      })
       this.val4 = Object.assign({}, this.fillingQus1);
      this.fillingQus = this.val4;
          },
    //处理一道填空题答案提交问题
    upOneAnswer(){
        this.fillingQus.Right2.push(this.fillingQus.fillingOneAnswer)
        this.fillingQus.fillingOneAnswer=''

    },
    //清除单选题已出的上一题题目
    clearUpQues1() {
      if (this.singleMsg.length !== 0) {
        this.sumScore1 -= parseInt(this.singleMsg[length-1].singleValue);
        this.i--;
        this.singleMsg.splice(this.singleMsg[length], 1);
        this.$Message.error("成功删除上一题");
      } else {
        this.$Message.error("数据为空");
      }
    },
     //清除多选题已出的上一题题目
    clearUpQues2(a) {
      if (this.multiMsg.length!== 0) {
        this.sumScore2 -= parseInt(this.multiMsg[length-1].singleValue);
        this.j--;
        this.multiMsg.splice(this.multiMsg[length], 1);
        this.$Message.error("成功删除上一题");
      } else {
        this.$Message.error("数据为空");
      }
    },

     //清除判断题已出的上一题题目
       clearUpQues3() {
         let obj=this.judgeQusMsg[length-1]
      if(this.judgeQusMsg.length!== 0) {
        this.sumScore3-=parseInt(obj.singleValue) ;
        this.m--;
        this.judgeQusMsg.splice(this.judgeQusMsg[length], 1);

        this.$Message.error("成功删除上一题");
      } else {
        this.$Message.error("数据为空");
      }
    },



    //提交所以数据到控制台
    uploadtoDatabase(a, b, c) {
      this.getteachername = sessionStorage.getItem("teacherName");
      var data = new Date();
      var year = data.getFullYear();
      var month = addZero(data.getMonth());
      var day = addZero(data.getDate());
      var setTime = year + "-" + month + "-" + day;
      /* 检测考试信息有无填全 */
      if (this.examInfo.length<4)
      {this.$Message.error("考试信息有未填全");
           return }
     //检查考卷信息有无未填
      if (this.examInfo.length === 0||this.examPageTitle===''||this.testType==='') {
        this.$Message.error("考试信息有未填内容");
      } else {
        //检查时段考卷下开始时间和时间总长有无未填
        if(this.testType==='时段考卷'){
          let that=this
          if(that.examTime===''||that.examStartTime===''){
            that.$Message.error('时段考卷下开始时间和时间总长是必须选的')
            return
            }
        }
        //检查练习考卷下开始时间（结束时间）有无未填
         if(this.testType==='练习考卷'){
          let that=this
          if(that.examStartTime===''){
            that.$Message.error('练习考卷下截至时间(开始时间)是必须选的')
            return
             }
        }
        


        let sum = this.sumScore1 + this.sumScore2+this.sumScore3+this.sumScore4;
        if (sum !==100) {
          this.$Message.error("试卷不满足100分值");
        } else {
          this.examPageMsg.set("examInfo", a);
          this.examPageMsg.set("singleChoiceData", b);
          this.examPageMsg.set("multiChoiceData", c);
          this.examPageMsg.set("setter", this.getteachername);
          this.examPageMsg.set("major", this.Major);
          this.examPageMsg.set("setquestime", setTime);
          this.examPageMsg.set("examTime", this.examTime);
          this.examPageMsg.set("examPageTitle",this.examPageTitle)
          this.examPageMsg.set("examStartTime",this.examStartTime)
          this.examPageMsg.set("testType",this.testType)
          this.examPageMsg.set("judgeQusMsg",this.judgeQusMsg)
          this.examPageMsg.set("fillingMsg",this.fillingMsg)
          this.examPageMsg.set("testStatus",this.testStatus)

          let obj = Object.create(null);
          for (let [k, v] of this.examPageMsg) {
            obj[k] = v;
          }
          console.log(obj)
          this.isDisable = true;
          this.$axios({
            method: "post",
            url: "http://" + this.urlpath + "/CreateNewExamPage",
            data: obj
          }).then(res => {
            this.isDisable = false;
          });
          this.$Message.success("提交数据库成功!");
         this.examPageTitle=''
        }
      }
    }
   }
};
</script>
<style scoped>
.alert{
position: absolute;
top: 30px;
left: 300px;
}
.pane{
  position: relative;
}
</style>